<template>
  <div class="container">
    <div class="tips-title">1.基本用法</div>
    <el-switch v-model="value1" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
    <el-switch v-model="value2" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
    <div class="tips-title">2.禁用状态</div>
    <el-switch v-model="value6" disabled></el-switch>
    <el-switch v-model="value7" disabled></el-switch>
    <div class="tips-title">3.文字描述</div>
    <el-switch v-model="value3" active-text="按月付费" inactive-text="按年付费"></el-switch>
    <el-switch style="display: block" v-model="value4" active-color="#13ce66" inactive-color="#ff4949" active-text="按月付费" inactive-text="按年付费"></el-switch>
  </div>
</template>
<script>
  export default {
    name: 'f-switch',
    data() {
      return {
        value1: true,
        value2: false,

        value3: true,
        value4: true,

        value6: true,
        value7: false
      }
    }
  }
</script>
<style>

</style>

